<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">

<link rel="import" href="../todo-list/todo.html">
<dom-module id="todo-list">
  <template>
        <style>
            :host{
                display: block;
            }
        </style>
        <template is="dom-repeat" items="{{todos}}">
            <to-do todo="[[item]]" on-del="onDel"></to-do>
        </template>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class TodoList extends Polymer.Element {
      constructor(){
          super();
      }
      static get is() { return 'todo-list'; }
      static get properties() {
        return {
          
        };
      }
      onDel(e){
        this.dispatchEvent(new CustomEvent('del-todo',{detail:{content:e.detail.id}}));
      }
    }

    window.customElements.define(TodoList.is, TodoList);
  </script>
</dom-module>
